Mozilla Hacks

Progress report on cross-platform Open Web Apps

Avatar photo By Robert Nyman [Editor emeritus]

Posted on October 28, 2013 in Apps

Here in the Hacks blog we’ve written a lot about building apps for Firefox OS using HTML, JS, and CSS. We’re working to ensure that those same apps can also run on Android, Windows, Mac OS X, and Linux devices. If your app can adapt to those screen sizes, CPU’s, and device capabilities, then we’ve got a plan to ensure that your apps install, launch, quit, and uninstall as native apps on each of those platforms.

I’ve created a short video that shows how Open Web Apps from Firefox OS will work on any platform where Gecko is available.

Firefox OS is our benchmark platform for Open Web Apps. On Firefox OS, users can discover apps in the Firefox Marketplace and install them directly onto the phone’s home screen. As an example I’m using my app Shotclock, an open web app for computing sun angles for outdoor photographers. Let’s find out what happens when we install this app on other platforms.

Android

Android users discover apps in Firefox Marketplace using the Firefox for Android browser. Firefox Marketplace has approved Shotclock for Android, so we just click the install button as we did on Firefox OS. We will automatically repackage the Open Web App as a native Android app to give our users a native app experience for Open Web Apps.

Because we installed it from an android APK, we can manage it from the recent app list and we find it in the app drawer like every other app.

Windows

Windows users discover apps in the Firefox Marketplace using desktop Firefox. Firefox Marketplace has approved Shotclock for Windows laptops too, so we just click the Marketplace install button. We will automatically repackage the open web app as a native Windows app.

Here’s Shotclock running on Windows, just like a real app. Our repackaging will mean that users can launch their open web apps from the Windows Start menu and quit them from the File menu. Users will also uninstall them from the Programs control panel.

Mac OS X

Mac OS X users also discover apps in the Firefox Marketplace using desktop Firefox. We will automatically repackage the open web app as a native Mac OS X app. When the user clicks the install button, we install Shotclock in the Mac OS X Applications folder.

From there, it launches and runs just like a real app. The native packaging means users can switch between open web apps by pressing Control-Tab, and quit them from the File menu. How much code did the app developer rewrite? Zero.

Privileged Apps

So far we’ve looked at unprivileged Apps. We will also support privileged apps on all these platforms. Here is Kitchen Sink, our app for testing the Firefox OS privileged APIs. What happens when we install it on Android?

The experience of discovering and installing privileged apps will follow the Android convention of presenting a list of permissions to the user at install time. These permissions are copied from the open web app manifest. After the user completes the installation process, the App is ready to use, and is able to access the phone hardware.

Linux Desktop

The email application that comes with Firefox OS is basically a privileged App that uses the Socket API for networking. Marco Castelluccio, our open web apps intern, got it running on it on his Linux laptop.

He copied over the app package from Gaia and made one tweak to the app manifest. So, if you like the apps that come with your firefox os phone and want to run them on your other devices, cross-platform open web apps can make that happen.

iOS

We’d love to support Open Web Apps on iOS devices, but iOS does not, at this time, include the option to install a Gecko-based web browser, which is currently needed to support Open Web Apps.

Edit: We’re working with the Cordova community, both to allow Cordova apps to run unmodified on Firefox OS and to allow Open Web Apps packaged by Cordova to run on iOS. For more details see the Cordova Firefox OS project page and the Cordova Firefox OS GitHub repository.

Timetable

Desktop — You can install hosted, unprivileged apps on your desktops and laptops using Firefox 16 or newer. Privileged app support should land in Firefox Nightly in the next two months.

Android — You can install apps using Mobile Firefox Aurora, but you won’t get a native app experience yet. The native app experience should land in Mobile Firefox Nightly in December.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

29 comments

  1. b3tamax

    Excellent progress.
    The Open Web marches forward!

    October 28th, 2013 at 10:05

  2. Niclas Hoyer

    This is so great! Especially that there really is no vendor lock in. Everyone can launch their own app store if they want to. Please make the integration of privileged apps as smooth as possible. I’m definitely looking forward for a replacement of Thunderbird on linux. Although it requires much more effort to develop applications that run on every platform and nearly every screen size, it is worth the effort. I’d love to use the same application on all my devices.

    October 28th, 2013 at 10:53

    1. Bill Walker

      Thanks! We are close to allowing every app store to offer privileged apps, the missing piece is a UI where users give permission to a new app store to install privileged apps. We need to make that experience as clear as possible, to avoid users getting tricked into installing privileged apps from a store posing as someone else.

      October 29th, 2013 at 07:51

  3. madddddddddddddd

    how is this better than java?

    October 28th, 2013 at 15:23

    1. Luke

      Java isn’t included in Firefox, and Java can be slower than JS.
      It also doesn’t get better / get new features in new releases of Firefox.
      It also doesn’t work on mobiles.

      October 28th, 2013 at 21:46

      1. Ben

        What do you mean Java doesn’t work on mobiles? Android IS Java!

        October 29th, 2013 at 03:50

        1. Allan

          Only the UI and applications are Java. The core OS is actually C and C++

          October 29th, 2013 at 08:00

        2. Luke

          Good point. I was thinking from the point of web-apps though – No Java plugin port as far as I know of (but that would be a great idea).

          October 30th, 2013 at 08:02

    2. Bill Walker

      We could debate whether Java is a good app development platform, but when we choose technology we choose community, too. We want to bring all the amazing HTML/JS/CSS content out there right into the middle of all our devices. We want to harness the energy and enthusiasm of all those Web developers.

      October 29th, 2013 at 07:42

  4. Chris Sells

    This all looks cool, but what if I want to be able to package an Open Web App for publication in the app store of the platform itself, e.g. the iOS App Store, Google Play, the Windows App Store, etc.? I like that you can make it work technically, but I think users are going to look for platform-specific apps in the platform-specific store instead of in the Firefox market place. Thanks.

    October 28th, 2013 at 18:37

    1. Bill Walker

      As you note, it should be technically possible to take native app wrappers that we generate and submit them for distribution through app stores, but in general we don’t think we can be involved in that. It looks like many apps would be rejected because they use our new payment API instead of the platform-specific one, or because they themselves allow installation of apps. So, you’d be on your own to navigate those restrictions.

      Meanwhile, we need to continue working to make Firefox Marketplace a destination independent of any specific platform

      October 29th, 2013 at 07:47

  5. Luke

    Nice! Will it also integrate with Ubuntu using Unity web-apps?

    October 28th, 2013 at 21:38

    1. Bill Walker

      I like the idea, we’d love to talk with Ubuntu folks about putting all our apps API’s and manifest formats into a W3C standard so we can interoperate.

      October 30th, 2013 at 14:49

  6. Ivan Dejanovic

    I really like what you accomplished so far. I like the idea of web apps running as a native app. This is a whole new take on cross platform products.

    At the moment user need to have Firefox installed on his/her phone, tablet, desktop in order to install web apps. Are there talks and plans with other browser vendors to enable common API so any browser can be used in this way. It can be useful in cases users don’t want or can not install Firefox on the device.

    Can web apps that are not in marketplace be installed and used as native. I now that I can just add an install button on my web site and any user can click the button and install web app on his/her Firefox OS device. This way I can distribute apps directly from my web site. Is this feature supported for android, linux, windows, mac os?

    October 29th, 2013 at 02:12

  7. pd

    Delicious appears to have just built their new version in this manner. Unfortunately they’ve also taken the intelligentsia’s recommendation of designing for mobile first and forcing that crappy experience on desktop users, too far.

    Still, it’s all a learning curve I guess. Wont be long before things will trend back to having navigation objects on desktop styled like, well, buttons and so on, again. All with the power of CSS :) Swings and roundabouts.

    One weakness of the ‘installable’ web app is still that the ecosystem doesn’t support any default, built-in user feedback. There was a good reason why Windows apps all tended to have a status bar for decades and it wasn’t just some baby you can throw out with the bathwater! For some obscure reasons, the Delicious app just doesn’t do anything whatsoever, randomly. Where’s the indication it’s trying and perhaps experiencing network problems? Where’s an error message? Nothing! Just a white screen. Why cheat users of fundamental intuitive feedback and put the burden back on developers to replace what was already there? Any network request should trigger the same status feedback in a web app as it does in desktop Firefox. Make it the ‘lite’ version instead of a full status bar if you have to, but give the users *something*!

    October 29th, 2013 at 09:56

  8. Steve

    Will it be possible to get the OWA packaged as an Android app using Mozilla tools so that the apps can be published on the Google Play store or another app store? Or would this not meet app store requirements because of the fact that Firefox for Android would need to be installed first?

    October 29th, 2013 at 14:59

    1. Bill Walker

      The repackaged apps for Android will depend on Firefox for Android, so if they can’t detect it at launch time, they’ll direct you to go install it. As for uploading to Google Play, I think we’ll have to leave that to individual developers to work out.

      October 30th, 2013 at 14:56

  9. reProgrammed

    Sometimes I wish Mozilla would move as fast as Google Chrome, but I can see why things take a bit longer now: Mozilla’s too busy doing amazing things like this!

    October 29th, 2013 at 15:57

    1. pd

      Out of curiosity, how do you see Mozilla as moving slower than Chrome? If anything, doesnt Mozilla release more frequently (for better or worse), though of course it could be argued that there’s no real new features with most releases.

      I hope you don’t equate a fast-moving Mozilla with copying Chrome’s UI, which they plan to do, for the worst in a lot of people’s eyes.

      October 30th, 2013 at 01:19

      1. Florian Bender (@fbender_dev)

        Mozilla never did plan to and never will copy Chrome’s UI. The misperception you have is that Australis looks like Chrome, but if you take a closer look, it does not. The only thing that will be the same is the menu icon (because that is pretty much standard now for all apps) and its position – but when clicking on them, they will show something different. Another thing many people mention are the tabs, but really, they are very different, with different outlines and an even bigger size (for me, they are too big, but hey, whatever) – and only the active tab will look like this, while inactive ones don’t have much of an outline at all.

        October 31st, 2013 at 00:23

        1. pd

          1) Status bar removal
          2) Tabs on top
          3) Single button instead of a menu (on the left not right, oooh, unique!)
          4) Add-ons manager in a content tab instead of a separate window (the Options dialogue and Library windows won’t last long surely?)
          5) Tabs in the title bar (a sensible move IMHO)
          6) Add-on icons in the location/tab bar
          7) Curved tabs
          8) Ultra minimal light download icon/doorhanger instead of a genuinely useful download window with remove, delete and open containing folder. In the process, seemingly breaking two great alternative download addons that have been around for years (Download Status Bar, Download Manager Tweak)
          9) Removal of the RSS feed detection icon (perhaps not a copy of Chrome but removing it removed another point of differentiation)
          10) Hiding the bookmarks bar by default (not a problem for me but again, who did this first?)
          11) Bookmarks star in the location box?
          12) Combination stop/reload button
          13) New tab page thumbnails
          14) Removal of the sidebar is on the cards as well isn’t it? Thus breaking another host of useful addons such as the excellent Sage RSS reader.

          Undoubtedly I’ve forgotten a few things as well. It’s been a long five years since Chrome walked into town and caught a napping Firefox unaware. Then there’s probably things I don’t even know about. After all, nothing is announced on Planet Mozilla anymore. That is just a place to read public speaking tips and goodbye-to-Mozilla postings.

          http://www.ghacks.net/2013/07/29/so-this-is-your-idea-of-a-great-user-interface-mozilla/

          You might feel like supporting Australis Florian but don’t delude yourself that it’s not a substantial nod in the direction of Chrome (if not a ‘copy’). Mozilla has been playing chasey with Google ever since Google pinched a huge chunk of Mozilla employees when Chrome was first announced. Mozilla is still chasing Google, trying to get fit and catch up with the multi-threaded, memory-efficient, invisible-upgrading, feature-packing Chrome that ran right past the well-intentioned but middle-aged, memory-bloated, GC-pausing, single-process, video-codec-deprived, fat Firefox. Congrats to MemShrink and Snappy projects for the personal training they did to get Firefox off it’s arse and exercising to lose all that weight and give it a decent aerobic fitness. Unfortunately it was 3 years too late and now the threat of mutiny is in the air as Mozilla slowly mimics Chrome’s UI. Now those loyal Firefox users who’ve suffered years of poor performance, as appeal after appeal is ignored by Mozilla’s management, hope like hell for a stay of execution, like a convict on death row, as the spectre of Australis threatens to send them to the gas chamber that is Chrome.

          October 31st, 2013 at 03:50

          1. Robert Nyman [Editor]

            Two things:

            1. This discussion is going off-topic. This article is about Open Web Apps, not the UI of Firefox.
            2. While you naturally are entitled to make the case for from where features came from (and this could be endless, and there are a number of takes), this is then turning more into a personal tirade.

            Please refrain from posting comments like this and stay on-topic.

            October 31st, 2013 at 15:58

          2. Luke

            Firefox is significantly better/faster than Chrome in many cases – see This for example: http://kripken.github.io/ammo.js/examples/new/ammo.html

            It’s also significantly better in general user experience – for example, if/when flash crashes, it blanks out where the plugin would be, instead of saying “crashed tab” and displaying nothing. The addons are generally great and useful, and numerous. It doesn’t have webkit’s random bugs.

            The one thing Chrome does have going for it is the devtools, but that’s not so great in recent releases – When docked at the bottom of the window, the “status bar” loading thing can actually go over the Console/inspector/profiler, requiring mousing all over the place to change tabs – and the right click, evaluate in console hasn’t worked well in recent versions because it deselects when right-clicking :(

            As for “copying chrome” by making Firefox marketplace – isn’t that what Chrome somewhat copied when they copied Firefox addons?

            October 31st, 2013 at 17:53

      2. reProgrammed

        pd, when I mentioned wishing Firefox would move as fast as Chrome, perhaps I should have clarified wishing Firefox would move as fast as Chrome with releasing HTML5 (and alike) features. If you take a quick look at html5test.com, you can see that Firefox is just barely ahead of Safari and Internet Explorer in terms of how many HTML5 features it supports.

        For a company/organization that promotes the open web, I would expect them to be ahead of Chrome (which is currently at the top) in terms of the HTML5 features it supports. Nevertheless, Mozilla is doing amazing things with what features it does support.

        November 10th, 2013 at 16:19

  10. Jr

    Hi,

    I’m using an Aurora version in Android because I don’t have a gMail account and I don’t use GooglePlay…

    Where can I download the [official] latest Firefox apk file? (out of gPlay)…

    Where is the Firefox (that I love) Freedom if I need make a gmailAccount to download it on Android?

    Thanks

    October 30th, 2013 at 05:32

    1. Robert Nyman [Editor]

      As outlined on the wiki page for Firefox on Android, you can also download .apk files directly.

      October 30th, 2013 at 13:58

    2. Luke

      That would be related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=794963

      Also there’s a bug there somewhere about only having Google Play link, and not an apk link or FDroid repository link – but I can’t seem to find it.

      October 31st, 2013 at 17:59

  11. nadrimajstor

    Did I get this right: I’ve made some FxOS app which is published on the Mozilla’s Marketplace and all I have to do is flip some check boxes on the market’s dashboard and the app runs on other platforms? :o

    October 30th, 2013 at 16:15

  12. Junior

    Hi, is there a way of hide the ‘simple menu’ (File | Edit) embedded in Desktop Web Apps? Isn’t possible close the application just clicking on X button or via window.close() JS?

    I want to develop commercial applications (without ‘defaults’ menu and context menu) and that simple menu is the only thing I [really] didn’t like in Web Apps…

    Thanks

    November 6th, 2013 at 16:14

Comments are closed for this article.